﻿import React from 'react';
import util from './js/util.js'
import { BrowserRouter, HashRouter, Route, Link } from 'react-router-dom';
import { Modal, Button, message } from 'antd';
import './css/LogReg.css';

class Login extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            password: "",
            username: "",
        }
    }
    GetUsername(e) {
        this.setState({
            username: e.target.value
        })
    }
    GetPassword(e) {
        this.setState({
            password: e.target.value
        })
    }
    // toLogin() {
    //     var username = this.state.username,
    //         password = this.state.password;
    //     // 先去localstorage中取看是否有数据
    //     let userList = localStorage.getItem('userList')
    //     // 如果存在
    //     if (userList) {
    //         userList = JSON.parse(userList)
    //         const isSucc = userList.some(userinfo => {
    //             return userinfo.username === username && userinfo.password === password
    //         })
    //         if (isSucc) {
    //             util.setCookie('loginUsername', username, { path: '/' })
    //             message.success('登录成功，自动为您跳转到首页', 3);
    //             this.props.history.push('/home')
    //         } else {
    //             message.warning('用户名或密码错误，请重新输入')
    //         }
    //     } else {
    //         message.info('查无此账号，请大佬您先去注册', 3)
    //     }
    // }
    componentDidMount() {
var _this = this
        //在页面上使用,需要接受四个参数
        window.jigsaw.init({

            el: document.getElementById('captcha'),  //参数一：代表渲染图片的DOM元素

            onSuccess: function () {   //参数二：代表滑动验证成功后要执行的函数
                document.getElementById('msg').innerHTML = '滑动验证成功！'
                //你还可以在这里检验用户名和密码是否正确，实现页面跳转等
                //.............
                var username = _this.state.username,
                password = _this.state.password;
            // 先去localstorage中取看是否有数据
            let userList = localStorage.getItem('userList')
            // 如果存在
            if (userList) {
                userList = JSON.parse(userList)
                const isSucc = userList.some(userinfo => {
                    return userinfo.username === username && userinfo.password === password
                })
                if (isSucc) {
                    util.setCookie('loginUsername', username, { path: '/' })
                    message.success('登录成功，自动为您跳转到首页', 3);
                    _this.props.history.push('/home')
                } else {
                    message.warning('用户名或密码错误，请重新输入')
                }
            } else {
                message.info('查无此账号，请大佬您先去注册', 3)
            }
            },

            onFail: function () {  //参数三，代表滑动验证失败要执行的函数
                document.getElementById('msg').innerHTML = '滑动验证失败！'
            },

            onRefresh: function () {   //参数四，表示图片刷新时要执行的函数
                document.getElementById('msg').innerHTML = '';
            }
        })
    }

    render() {
        return (
            <div className='bigBox'>
<div className="formCourse">
                <form className="container formLog">
                    <h1 className='courseTit2'>课程评价系统</h1>
                    <h3 className='courseTit1'>登录</h3>
                    <input className='ipt' placeholder="请输入用户名" value={this.state.username} onChange={this.GetUsername.bind(this)} />
                    <br />
                    <br />
                    <input className='ipt' placeholder="请输入密码" value={this.state.password} onChange={this.GetPassword.bind(this)} />
                    <br />
                    <br />
                    <div id="captcha"></div>
                    <div id="msg"></div>
                    <br />                              
                    <br />
                    {/* <button className='btn' type='button' onClick={this.toLogin.bind(this)}>登录</button> */}
                    <br />
                    <br />
                    <Link to='/register'>还没有账号？去注册</Link>
                </form>
</div>
            </div>
        )
    }

}
export default Login